<template>
<div class="cc">
    <h2>购物车</h2>
    <label>单价</label>
    <input type="number" v-model="price"/>

    <label>数量</label>
    <input type="number" v-model="quantity" />

    <button @click="total = price * quantity">计算总价</button>

    <p>单价: {{ price }}</p>
    <p>数量: {{ quantity }}</p>
    <p>总价: {{ total }}</p>
</div>
</template>

<script setup>
import { ref } from 'vue'

const price = ref(0) //单价
const quantity = ref(0) //数量
const total = ref(0) //总价

</script>

<style scoped>
.cc{
    background-color: rgb(238, 234, 250);
    padding:20px;
    border-radius:10px;
}
</style>